<template>
  <el-dialog
    ref="Cdialog"
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :modal="modal"
    class="Cdialog"
    :close-on-click-modal="clickModal"
    :show-close="showClose"
    :close-on-press-escape="pressEscape"
    v-bind="$attrs"
    :before-close="handleClose"
  >
    <el-scrollbar ref="CdialogScrollbar" wrap-class="scrollbar-wrapper" :style="{ height: autoHeight }">
      <slot />
    </el-scrollbar>
    <div slot="title" class="dialog-title" style="color: #fff">
      {{ title }}
    </div>
    <div slot="footer" class="dialog-footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'Cdialog',
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '40%'
    },
    clickModal: {
      type: Boolean,
      defalut: false
    },
    pressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      autoHeight: '100%',
      initHeaderHeight: 0, // 初始头部高度
      initBodyHeight: 0, // 初始内容高度
      initfooterHeight: 0, // 初始底部高度
      screenHeight: 0, // 屏幕高度
      resizeObserver: null
    }
  },
  computed: {
    dialogHight() {
      return this.initHeaderHeight + this.initBodyHeight + this.initfooterHeight
    }
  },
  watch: {
    visible: {
      handler(n) {
        if (n) { // 在监听里对内容高宽刷新 而不是在生命周期
          // ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）
          this.resizeObserver = new ResizeObserver(entries => { // 创建并返回一个ResizeObserver对象。
            this.initScreen() // 初始化高宽
          })

          window.addEventListener('resize', this.getClientSize) // 添加调整文档视图的大小时发生此事件。
          if (this.resizeObserver) {
            this.resizeObserver.observe(this.$refs.Cdialog.$refs.dialog) // 添加开始观察指定的 Element或 SVGElement。
          }
        } else {
          window.removeEventListener('resize', this.getClientSize) // 清除
          if (this.resizeObserver) {
            this.resizeObserver.unobserve(this.$refs.Cdialog.$refs.dialog) // 结束观察指定的Element或 SVGElement。
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 初始化元素高宽
    initScreen() {
      this.$nextTick(() => {
        this.$refs.Cdialog.$refs.dialog.childNodes.forEach(item => {
          if (item.className === 'el-dialog__header') {
            this.initHeaderHeight = item.clientHeight
          } else if (item.className === 'el-dialog__body') {
            this.initBodyHeight = item.clientHeight
          } else if (item.className === 'el-dialog__footer') {
            this.initfooterHeight = item.clientHeight
          }
        })
        // console.log(this.initHeaderHeight, '初始头部高度')
        // console.log(this.initBodyHeight, '初始内容高度')
        // console.log(this.initfooterHeight, '初始底部高度')
        // console.log(this.dialogHight, '总高度')
        this.getClientSize() // 初始化屏幕高度
      })
    },
    getClientSize() {
      this.$nextTick(() => {
        this.screenHeight = document.documentElement.clientHeight // 屏幕高度
        if (this.screenHeight <= this.dialogHight) {
          this.autoHeight = `${this.screenHeight - (this.initHeaderHeight + this.initfooterHeight)}px`
        } else {
          this.autoHeight = `100%`
        }
        if (this.$refs.CdialogScrollbar) this.$refs.CdialogScrollbar.update() // scrollbar组件的内置更新 滚动条尺寸方法
        // console.log(this.screenHeight, '屏幕高度')
        // console.log(this.autoHeight, '实际内容高度')
      })
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/element-variables.scss";
  .Cdialog{
    display: flex;
    align-items: center;
    justify-content: center;
    .el-dialog{
      margin-top: 0 !important;
      box-shadow:0px 2px 16px 2px rgba($color: $--color-primary, $alpha: .3) !important;
      max-width: 100%;
      margin: 0 10px;
      border-radius: 10px;
      max-height: 100%;
      height: max-content;
      // width: auto !important;
      .el-dialog__header{
        background: rgba($color: $--color-primary, $alpha: .8);
        padding: 10px 10px !important;
        height: 40px !important;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        border-radius: 10px 10px 0 0;
        .dialog-title{
          font-size: 14px;
          font-weight: bold;
          color: #FFFFFF;
        }
        .el-dialog__headerbtn{
          position: relative;
          top: 0;
          right: 0;
          .el-dialog__close{
            color: #FFFFFF;
            font-size: 18px;
          }
        }
      }
      .el-dialog__body{
        padding: 0 !important;
        // height: 100%;
        // height: calc(100% - 40px) !important;
        // max-height: calc(100vh - 80px);
        .is-horizontal{ // 饿了么横向滚动条
          display: none;
        }
      }
      .el-dialog__footer{
        padding: 10px !important;
        // text-align: inherit;
        .dialog-footer{
          width: 100%;
        }
      }
    }
  }
</style>
